<template>
  <!-- 在vue3中组件模板不需要使用一个根标签 -->
  <!-- <img alt="Vue logo" src="./assets/logo.png" />
  <HelloWorld msg="Welcome to Your Vue.js App" /> -->
  <!-- <div>我是app.vue 根组件</div> -->

  <!-- 使用home 组件 -->
  <!-- <Home></Home> -->

  <!-- 使用category组件 -->
  <!-- <Category></Category> -->

  <!-- 使用car 组件 -->
  <!-- <Car></Car> -->

  <!-- 使用mine组件 -->
  <!-- <Mine :tit="str" @transfer="getData"></Mine> -->

  <!-- 使用计算组件 -->
  <!-- <ComputedCom></ComputedCom> -->

  <!-- 使用watch 监听函数 -->
  <!-- <watchCom></watchCom> -->

  <!-- vue3中的生命周期函数 -->
  <!-- <life-cycle-com v-if="flag"></life-cycle-com>
  <button @click="flag = !flag">显示/隐藏生命周期组件</button> -->

  <!-- 自定义hooks -->
  <!-- <hooks></hooks> -->

  <!-- ref组件 -->
  <Torefs></Torefs>
</template>

<script>
// import HelloWorld from "./components/HelloWorld.vue";
// 引入home组件
import Home from "@/views/Home.vue";
import Category from "@/views/Category.vue";
import Car from "@/views/Car.vue";
import Mine from "@/views/Mine.vue";
import ComputedCom from "@/views/ComputedCom.vue";
import watchCom from "@/views/watchCom.vue";
import lifeCycleCom from "@/views/lifeCycleCom.vue";
import Torefs from "@/views/Torefs.vue";

import hooks from "@/views/hooks.vue";
import { ref } from "vue";
export default {
  name: "App",
  components: {
    // HelloWorld,
    Home,
    Category,
    Car,
    Mine,
    ComputedCom,
    watchCom,
    lifeCycleCom,
    hooks,
    Torefs,
  },

  setup() {
    let str = "2204班全体高薪就业";
    const getData = (val) => {
      console.log(val);
    };

    let flag = ref(true);
    return {
      str,
      getData,
      flag,
    };
  },
};
</script>

<style>
</style>
